import React from 'react'
import clsx from 'clsx'
import './Menu.style.scss'

interface MenuProps {
  icon: JSX.Element
  onClick: () => void
  label: string
  dataTestId: string
  shortcut?: string
  isCollaborating?: boolean
}

const MenuItem = ({ icon, onClick, label, dataTestId, shortcut, isCollaborating }: MenuProps) => {
  return (
    <button
      className={clsx('menu-item', { 'active-collab': isCollaborating })}
      aria-label={label}
      onClick={onClick}
      data-testid={dataTestId}
      title={label}
      type='button'
    >
      <div className='menu-item__icon'>{icon}</div>
      <div className='menu-item__text'>{label}</div>
      {shortcut && <div className='menu-item__shortcut'>{shortcut}</div>}
    </button>
  )
}

export default MenuItem
